/**
 * Created by imac13 on 19/1/4.
 */
import React,{ Component } from 'react';
import { Card,Button,Icon,Radio } from 'antd';
import './../ui.less'


const ButtonGroup = Button.Group;
class Buttons extends Component {
    state = {
        loading: true,
        iconLoading: false,
        size: 'default'
    };
    enterLoading = () => {
        this.setState({ iconLoading: true });
    };
    leaveLoading = () => {
        this.setState({ loading: !this.state.loading });
    };
    handleSizeChange = (e) => {
        this.setState({ size: e.target.value });
    };
    render(){
        const size = this.state.size;
        return(
            <div>
                <Card title="基础按钮" className="card-wrapper">
                    <Button type="primary">Imooc</Button>
                    <Button>Imooc</Button>
                    <Button type="danger">Imooc</Button>
                    <Button type="dashed">Imooc</Button>
                    <Button disabled>Imooc</Button>
                </Card>
                <Card title="图形按钮" className="card-wrapper">
                    <Button icon="plus">创建</Button>
                    <Button icon="edit">编辑</Button>
                    <Button icon="delete">删除</Button>
                    <Button shape="circle" icon="search"></Button>
                    <Button type="primary" icon="search">搜索</Button>
                    <Button type="primary" icon="download">下载</Button>

                </Card>
                <Card title="Loading按钮" className="card-wrapper">
                    <Button type="primary" loading={this.state.loading}>确定</Button>
                    <Button shape="circle" type="primary" loading={this.state.loading}></Button>
                    <Button loading={this.state.iconLoading} onClick={this.enterLoading}>点击加载</Button>
                    <Button shape="circle" loading={this.state.loading}></Button>
                    <Button type="primary" onClick={this.leaveLoading}>toggle</Button>

                </Card>
                <Card title="按钮组" className="card-wrapper">
                    <ButtonGroup>
                        <Button type="primary" style={{marginRight:0}}><Icon type="left" />Go back</Button>
                        <Button type="primary">Go forward<Icon type="right" /></Button>
                    </ButtonGroup>
                </Card>
                <Card title="按钮尺寸" className="card-wrapper">
                    <Radio.Group value={size} onChange={this.handleSizeChange}>
                        <Radio value="large" style={{marginRight:'10px'}}>大</Radio>
                        <Radio value="default" style={{marginRight:'10px'}}>中</Radio>
                        <Radio value="small" style={{marginRight:'10px'}}>小</Radio>
                    </Radio.Group>
                    <Button type="primary" size={size}>Imooc</Button>
                    <Button size={size}>Imooc</Button>
                    <Button type="dashed" size={size}>Imooc</Button>
                    <Button type="danger" size={size}>Imooc</Button>
                </Card>
            </div>
        )
    }
}

export default Buttons;